<template>
  <div class="options">
    <div class="top">
      <img src="../../assets/images/cz1.png" alt="" @click="gohome" />
    </div>
    <div class="contenta">
      <div class="left">
        <img src="../../assets/images/options1.png" alt="" />
        <p>{{ $t("common.dizhi") }}</p>
      </div>
      <div class="right">
        <p>{{ userInfo.address | sitef }}</p>
        <img
          src="../../assets/images/options2.png"
          alt=""
          @click="copyLink(userInfo.address)"
        />
      </div>
    </div>
    <div class="contenta">
      <div class="left">
        <img src="../../assets/images/options3.png" alt="" />
        <p>UID</p>
      </div>
      <div class="right">
        <p>{{ userInfo.uid }}</p>
        <img
          src="../../assets/images/options2.png"
          alt=""
          @click="copyLink(userInfo.uid)"
        />
      </div>
    </div>
    <div class="contenta" @click="showPopupEmail">
      <div class="left">
        <img src="../../assets/images/options4.png" alt="" />
        <p>{{ $t("common.youxiang") }}</p>
      </div>
      <div class="right">
        <p>{{ userInfo.email }}</p>
        <img src="../../assets/images/options5.png" alt="" class="email" />
      </div>
    </div>
    <div class="contentb" @click="showPopup">
      <div class="left">
        <img src="../../assets/images/options6.png" alt="" />
        <p>{{ $t("common.zijinmima") }}</p>
      </div>
      <div class="right">
        <img src="../../assets/images/options5.png" alt="" />
      </div>
    </div>
    <div class="contenta" @click="goLanguage">
      <div class="left">
        <img src="../../assets/images/options7.png" alt="" />
        <p>{{ $t("common.duoyuyan") }}</p>
      </div>
      <div class="right">
        <p>{{ $t("common.zhongwenjianti") }}</p>
        <img src="../../assets/images/options5.png" alt="" class="email" />
      </div>
    </div>
    <div class="contenta" @click="goApi" v-if="userInfo.email">
      <div class="left">
        <img src="../../assets/images/api.png" alt="" />
        <p>API{{$t("common.shenqing")}}</p>
      </div>
      <div class="right">
        <img src="../../assets/images/options5.png" alt="" class="email" />
      </div>
    </div>
    <div class="contentb" @click="gonotice">
      <div class="left">
        <img src="../../assets/images/options8.png" alt="" />
        <p>{{ $t("common.tongzhi") }}</p>
      </div>
      <div class="right">
        <img src="../../assets/images/options5.png" alt="" />
      </div>
    </div>
    <div class="contentb" @click="goProblem">
      <div class="left">
        <img src="../../assets/images/options9.png" alt="" />
        <p>{{ $t("common.bangzhuzhongxin") }}</p>
      </div>
      <div class="right">
        <img src="../../assets/images/options5.png" alt="" />
      </div>
    </div>
    <div class="contentb" @click="goShare">
      <div class="left">
        <img src="../../assets/images/options10.png" alt="" />
        <p>{{ $t("common.fenxiang") }}</p>
      </div>
      <div class="right">
        <img src="../../assets/images/options5.png" alt="" />
      </div>
    </div>
    <div class="contentb" @click="goConnent">
      <div class="left">
        <img src="../../assets/images/options11.png" alt="" />
        <p>{{ $t("common.lianxiwomen") }}</p>
      </div>
      <div class="right">
        <img src="../../assets/images/options5.png" alt="" />
      </div>
    </div>
    <van-button type="info" class="button" @click="logout">{{
      $t("common.duankailianjie")
    }}</van-button>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '118.4vw' }"
      class="popup"
    >
      <div class="title">{{ $t("common.xiugaizijinmima") }}</div>
      <!-- <p class="p1">旧密码</p>
      <div class="old">
        <input v-model="pwdForm.moneyPassword" type="text" placeholder="请输入原密码" />
      </div> -->
      <p class="p2">{{ $t("common.xinmima") }}</p>
      <div class="new">
        <input
          v-model="pwdForm.newMoneyPassword"
          @blur="newMoneyPasswords"
          type="password"
          autocomplete="new-password"
          :placeholder="$t('common.mimabixuwei')"
        />
      </div>
      <p class="tip1" v-show="tip1">{{ $t("common.bufuhe") }}</p>
      <p class="p3">{{ $t("common.querenmima") }}</p>
      <div class="identify">
        <input
          v-model="pwdForm.confirmMoneyPassword"
          type="password"
          autocomplete="new-password"
          :placeholder="$t('common.qingqueren')"
        />
      </div>
      <p class="tip2" v-show="tip2">{{ $t("common.buyizhi") }}</p>
      <van-button type="info" class="submit" @click="submit">{{
        $t("common.queding")
      }}</van-button>
    </van-popup>

    <van-popup
      v-model="showverify"
      closeable
      position="bottom"
      :style="{ height: '97.33vw' }"
      class="popupEmail"
    >
      <div class="title">{{ $t("common.anquanyanzheng") }}</div>
      <p class="p2">{{ userInfo.email }}</p>
      <div class="verify">
        <input
          v-model="regForm.emailCode"
          type="number"
          :placeholder="$t('common.qingshuruyou')"
        />
        <p @click="sendEmailCode1">
          {{
            sendEmailText === $t("common.fasongyanzhengma")
              ? sendEmailText
              : sendEmailText + "s"
          }}
        </p>
      </div>
      <van-button type="info" class="identify" @click="submitidentify">{{
        $t("common.queding")
      }}</van-button>
    </van-popup>

    <van-popup
      v-model="showEmail"
      closeable
      position="bottom"
      :style="{ height: '97.33vw' }"
      class="popupEmail"
    >
      <div class="title">{{ $t("common.xiugaiyouxiangdizhi") }}</div>
      <p class="p1">{{ $t("common.xinyouxiang") }}</p>
      <div class="email">
        <input
          v-model="regForm.email"
          type="text"
          :placeholder="$t('common.shurufasong')"
        />
      </div>
      <p class="p2">{{ $t("common.yanzhengxinyouxiang") }}</p>
      <div class="verify">
        <input
          v-model="regForm.emailCode"
          type="number"
          :placeholder="$t('common.shurufasong')"
        />
        <p @click="sendEmailCode">
          {{
            sendEmailText === $t("common.fasongyanzhengma")
              ? sendEmailText
              : sendEmailText + "s"
          }}
        </p>
      </div>
      <van-button type="info" class="identify" @click="submitEmail">{{
        $t("common.queding")
      }}</van-button>
    </van-popup>

    <van-popup
      v-model="showShare"
      closeable
      :style="{ height: '812px' }"
      class="share"
    >
      <div class="top">
        <img :src="shareUrl" alt="" class="shareImg" />
      </div>
      <div class="bottom">
        <div class="left">
          <img @click="fuzhima" :src="qrcodeImg" alt="" />
        </div>
        <div class="right">
          <p class="p1">{{ $t("common.saomabang") }}</p>
          <p class="p2" @click="fuzhima">
            {{ $t("common.yaoqing")
            }}<span>{{ getUserInfo.inviteCode || "" }}</span
            ><img src="../../assets/images/cz4.png" alt="" />
          </p>
        </div>
      </div>
    </van-popup>

    <van-dialog
      v-model="duankaishow"
      class="duankaishow"
      :title="$t('common.tishi')"
      show-cancel-button
    >
      <p>{{ $t("common.duankai") }}</p>
      <div class="xbutton">
        <button class="btn1" @click="duankaif">
          {{ $t("common.quxiao") }}
        </button>
        <button class="btn2" @click="duankaift">
          {{ $t("common.queding") }}
        </button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { mapGetters } from "vuex";
import { Toast } from "vant";
import QRCode from "qrcode";
export default {
  computed: {
    ...mapGetters(["getUserInfo"]),
  },
  data() {
    return {
      shareUrl: "",
      pwdForm: {
        newMoneyPassword: "",
        confirmMoneyPassword: "",
      },
      sendEmailText: this.$t("common.fasongyanzhengma"),
      // tishi: this.$t('common.tishi'),
      // duankai: this.$t('common.duankai'),.
      // fuzhicheng: this.$t('common.fuzhicheng'),
      // fuzhishi: this.$t('common.fuzhishi'),
      // fasongcheng: this.$t('common.fasongcheng'),
      // buweikong: this.$t('common.buweikong'),
      // bunengyizhi: this.$t('common.bunengyizhi'),
      regForm: {
        email: "",
        emailCode: "",
      },
      userInfo: {},
      show: false,
      showEmail: false,
      showverify: false,
      showShare: false,
      timer: null,
      tip1: false,
      tip2: false,
      duankaishow: false,
      qrcodeImg: "",
    };
  },
  async created() {
    this.userInfo = this.getUserInfo || {};
    console.log(this.userInfo);
    this.createQRCode();
  },
  methods: {
    fuzhima() {
      this.$copyText(
        `https://www.rippleexchange.com/index?inviteCode=${this.getUserInfo.inviteCode}`
      ).then(
        () => {
          this.$toast(this.$t("common.fuzhiyaoqing"));
        },
        () => {
          this.$toast(this.$t("common.fuzhishi"));
        }
      );
    },
    createQRCode() {
      QRCode.toDataURL(
        `https://www.rippleexchange.com/index?inviteCode=${this.getUserInfo.inviteCode}`,
        {
          //这个this.url就是你扫码后要跳转的地址
          version: 7, //版本号
          errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量
          width: 280, //设置二维码图片大小
          height: 280,
        }
      )
        .then((url) => {
          // console.log(url); //这个url是二维码生成地址，也就是相当于图片地址
          this.qrcodeImg = url; //赋值给变量。用在img的src属性上
        })
        .catch((err) => {
          console.error(err);
        });
      console.log(this.qrcodeImg);
    },
    newMoneyPasswords() {
      if (
        this.pwdForm.newMoneyPassword.length < 8 ||
        this.pwdForm.newMoneyPassword.length > 32
      ) {
        this.tip1 = true;
      } else {
        this.tip1 = false;
      }
    },
    //断开连接
    duankaif() {
      this.duankaishow = false;
    },
    duankaift() {
      this.duankaishow = false;
      this.$store.commit("removeUserInfo");
      window.location.reload();
    },
    //断开连接
    logout() {
      this.duankaishow = true;
      // Dialog.confirm({
      //   title: this.tishi,
      //   message: this.duankai,
      //   theme: 'round-button',
      // }).then(() => {
      //   this.$store.commit("removeUserInfo");
      //   window.location.reload()
      // }).catch(()=>{
      //   //
      // })
    },
    goApi() {
      // if(!this.userInfo.email){
      //   this.$toast('请先完成注册邮箱')
      //   return
      // }
      this.$router.push("/zapi");
    },
    gohome() {
      this.$router.push("/index");
    },
    gonotice() {
      this.$router.push("/notice");
    },
    // goindex() {
    //   this.$router.push("/index");
    // },
    goShare() {
      let index = (Math.random() * 2 + 1) | 0;
      console.log("dsfsfd", index);
      this.shareUrl = require(`../../assets/images/share${index}.png`);
      this.sendEmailText = this.$t("common.fasongyanzhengma");
      this.showShare = true;
    },
    goProblem() {
      localStorage.setItem("zh", 1);
      this.$router.push("/problem");
    },
    goLanguage() {
      this.$router.push("/language");
    },
    showPopup() {
      this.show = true;
      this.tip1 = false;
      this.tip2 = false;
      this.pwdForm.newMoneyPassword = "";
      this.pwdForm.confirmMoneyPassword = "";
      this.sendEmailText = this.$t("common.fasongyanzhengma");
    },
    showPopupEmail() {
      this.showEmail = true;
      this.regForm.email = "";
      this.regForm.emailCode = "";
      this.sendEmailText = this.$t("common.fasongyanzhengma");
    },
    goConnent() {
      this.$router.push("/connent");
    },
    submit() {
      if (this.pwdForm.newMoneyPassword !== this.pwdForm.confirmMoneyPassword) {
        this.tip2 = true;
      } else {
        if (
          this.pwdForm.newMoneyPassword.length >= 8 &&
          this.pwdForm.newMoneyPassword.length <= 32
        ) {
          this.show = false;
          this.showverify = true;
        }
      }
    },
    async sendEmailCode1() {
      this.sendEmailText = 60;
      const timer = setInterval(() => {
        if (this.sendEmailText === 0) {
          clearInterval(timer);
          this.sendEmailText = this.$t("common.fasongyanzhengma");
        } else {
          this.sendEmailText -= 1;
        }
      }, 1000);
      const ret = await this.$http({
        url: "/user/email/sendEmail?message=CustomerModifyMoneyPassword",
        method: "post",
        data: {
          email: this.userInfo.email,
        },
      });
      if (ret.data.code === 0) {
        this.$toast(this.$t("common.fasongcheng"));
      } else {
        this.sendEmailText = this.$t("common.fasongyanzhengma");
      }
    },
    async submitidentify() {
      const ret = await this.$http({
        url: "/user/user/modifyMoneyPassword",
        method: "post",
        data: {
          uid: this.userInfo.uid,
          email: this.userInfo.email,
          userVerificationCode: this.regForm.emailCode,
          newMoneyPassword: this.$md5(this.pwdForm.newMoneyPassword),
          confirmMoneyPassword: this.$md5(this.pwdForm.confirmMoneyPassword),
        },
      });
      if (ret.data.code === 0) {
        console.log(ret);
        Toast(ret.data.data);
        this.showverify = false;
        location.reload();
      } else {
        this.$toast(ret.data.msg);
      }
    },
    async sendEmailCode() {
      if (this.userInfo.email == this.regForm.email) {
        this.$toast(this.$t("common.bunengyizhi"));
        return;
      }
      if (!this.regForm.email) {
        this.$toast(this.$t("common.buweikong"));
        return;
      }
      if (this.sendEmailText !== this.$t("common.fasongyanzhengma")) {
        return;
      }
      this.sendEmailText = 60;
      const timer = setInterval(() => {
        if (this.sendEmailText === 0) {
          clearInterval(timer);
          this.sendEmailText = this.$t("common.fasongyanzhengma");
        } else {
          this.sendEmailText -= 1;
        }
      }, 1000);
      const ret = await this.$http({
        url: "/user/email/sendEmail?message=CustomerModifyEmail",
        method: "post",
        data: {
          email: this.regForm.email,
        },
      });
      if (ret.data.code === 0) {
        this.$toast(this.$t("common.fasongcheng"));
      } else {
        this.sendEmailText = this.$t("common.fasongyanzhengma");
      }
    },
    async submitEmail() {
      const ret = await this.$http({
        url: "/user/user/modifyEmail",
        method: "post",
        data: {
          uid: this.userInfo.uid,
          email: this.regForm.email,
          userVerificationCode: this.regForm.emailCode,
        },
      });
      if (ret.data.code === 0) {
        console.log(ret);
        this.$toast(ret.data.data);
        this.showEmail = false;
        await this.$store.dispatch("updateUserInfo");
        this.userInfo = this.getUserInfo;
      } else {
        this.$toast(ret.data.msg);
      }
    },
    copyLink(val) {
      // 复制链接  val 就是你需要复制的链接
      this.$copyText(val).then(
        () => {
          this.$toast(this.$t("common.fuzhicheng"));
        },
        () => {
          this.$toast(this.$t("common.fuzhishi"));
        }
      );
    },
  },
  filters: {
    sitef(val) {
      if (val) {
        let qian = val.slice(0, 6);
        let hou = val.slice(-4);
        return qian + "..." + hou;
      }
      return "";
    },
  },
};
</script>

<style scoped lang="scss">
.options {
  margin: 0;
  padding: 0;
  .top {
    height: 11.73vw;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    //font-family: Microsoft Yahei;
    img {
      height: 5.3vw;
      width: 5.3vw;
      margin-left: 2.4vw;
    }
  }
  .contenta {
    height: 11.2vw;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      position: relative;
      top: 3.2vw;
      left: 3.46vw;
      img {
        width: 5.33vw;
        height: 5.33vw;
      }
      p {
        color: rgba(214, 214, 214, 100);
        font-size: 3.73vw;
        font-family: PingFangSC-regular;
        position: relative;
        left: 2.93vw;
        top: 0.8vw;
      }
    }
    .right {
      display: flex;
      position: relative;
      top: 3.2vw;
      right: 3.46vw;
      img {
        width: 3.73vw;
        height: 3.73vw;
      }
      p {
        color: rgba(214, 214, 214, 100);
        font-size: 3.73vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        right: 2.93vw;
      }
      .email {
        width: 3.2vw;
        height: 3.2vw;
        position: relative;
        top: 0.4vw;
      }
    }
  }
  .contentb {
    height: 13.06vw;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      position: relative;
      top: 3.73vw;
      left: 3.46vw;
      img {
        width: 5.33vw;
        height: 5.33vw;
      }
      p {
        color: rgba(214, 214, 214, 100);
        font-size: 3.73vw;
        font-family: PingFangSC-regular;
        position: relative;
        top: 0.6vw;
        left: 2.93vw;
      }
    }
    .right {
      position: relative;
      top: 4.4vw;
      right: 3.46vw;
      img {
        width: 3.2vw;
        height: 3.2vw;
      }
    }
  }
  .button {
    width: 93.33vw;
    height: 10.66vw;
    line-height: 5.33vw;
    border-radius: 1.33vw;
    background-color: rgba(10, 122, 255, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 3.73vw;
    text-align: center;
    //font-family: Arial;
    position: relative;
    top: 25vw;
  }
  .popup {
    border-radius: 2.66vw 2.66vw 0px 0px;
    background-color: #090A1B;
    .title {
      display: flex;
      justify-content: center;
      height: 6.13vw;
      color: rgba(255, 255, 255, 100);
      font-size: 4.26vw;
      font-family: PingFangSC-regular;
      position: relative;
      top: 6.4vw;
      letter-spacing: 0.2vw;
    }
    .p1 {
      width: 10.13vw;
      height: 4.53vw;
      color: rgba(255, 255, 255, 100);
      font-size: 3.2vw;
      font-family: PingFangSC-regular;
      position: relative;
      top: 10.13vw;
      left: 3.46vw;
      letter-spacing: 0.1vw;
    }
    // .old {
    //   width: 93.06vw;
    //   height: 10.13vw;
    //   border-radius: 0.8vw;
    //   background-color: #090A1B;
    //  //font-family: Arial;
    //   border: 1px solid rgba(135, 139, 151, 100);
    //   position: relative;
    //   top: 12.26vw;
    //   left: 3.46vw;
    //   display: flex;
    //   align-items: center;
    //   input {
    //     width: 85.33vw;
    //     color: #fff;
    //     font-size: 3.73vw;
    //     height: 6.66vw;
    //     position: relative;
    //     left: 2.4vw;
    //     background-color: #090A1B;
    //     border-width: 0;
    //   }
    // }
    .p2 {
      display: flex;
      justify-content: flex-start;
      width: 85vw;
      height: 4.53vw;
      color: rgba(255, 255, 255, 100);
      font-size: 3.2vw;
      font-family: PingFangSC-regular;
      position: relative;
      top: 17.06vw;
      left: 3.46vw;
      letter-spacing: 0.1vw;
    }
    .new {
      width: 93.06vw;
      height: 10.13vw;
      line-height: 5.33vw;
      border-radius: 0.8vw;
      background-color: #090A1B;
      //font-family: Arial;
      border: 1px solid rgba(135, 139, 151, 100);
      position: relative;
      top: 19.73vw;
      left: 3.46vw;
      display: flex;
      align-items: center;
      input {
        width: 85.33vw;
        color: #fff;
        font-size: 3.73vw;
        height: 6.66vw;
        position: relative;
        left: 2.4vw;
        background-color: #090A1B;
        border-width: 0;
      }
      input::-webkit-input-placeholder {
        color: rgba(79, 82, 93, 100);
      }
    }
    .tip1 {
      font-size: 3.2vw;
      width: 85vw;
      color: rgb(189, 62, 62);
      position: relative;
      top: 21vw;
      left: 3.46vw;
      text-align: left;
    }
    .tip2 {
      font-size: 3.2vw;
      width: 85vw;
      color: rgb(189, 62, 62);
      position: relative;
      top: 31vw;
      left: 3.46vw;
      text-align: left;
    }

    .p3 {
      width: 85vw;
      height: 4.53vw;
      color: rgba(255, 255, 255, 100);
      text-align: left;
      font-size: 3.2vw;
      font-family: PingFangSC-regular;
      position: relative;
      top: 24.53vw;
      left: 3.46vw;
      letter-spacing: 0.1vw;
    }
    .identify {
      width: 93.06vw;
      height: 10.13vw;
      line-height: 5.33vw;
      border-radius: 0.8vw;
      background-color: #090A1B;
      //font-family: Arial;
      border: 1px solid rgba(135, 139, 151, 100);
      position: relative;
      top: 28.26vw;
      left: 3vw;
      display: flex;
      align-items: center;
      input {
        width: 85.33vw;
        color: #fff;
        font-size: 3.73vw;
        height: 6.66vw;
        position: relative;
        left: 2.4vw;
        background-color: #090A1B;
        border-width: 0;
      }
      input::-webkit-input-placeholder {
        color: rgba(79, 82, 93, 100);
      }
    }
    .submit {
      width: 93.33vw;
      height: 10.66vw;
      line-height: 5.33vw;
      border-radius: 1.33vw;
      background-color: rgba(10, 122, 255, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 3.73vw;
      text-align: center;
      //font-family: Arial;
      position: relative;
      top: 50.33vw;
    }
  }
  .popupEmail {
    border-radius: 2.66vw 2.66vw 0px 0px;
    background-color: #090A1B;
    .title {
      height: 6.13vw;
      color: rgba(255, 255, 255, 100);
      font-size: 4.26vw;
      display: flex;
      justify-content: center;
      position: relative;
      top: 6.4vw;
      letter-spacing: 0.2vw;
    }
    .p1 {
      width: 85vw;
      height: 4.53vw;
      color: rgba(255, 255, 255, 100);
      font-size: 3.2vw;
      text-align: left;
      font-family: PingFangSC-regular;
      position: relative;
      top: 11.73vw;
      left: 3.46vw;
      letter-spacing: 0.1vw;
    }
    .email {
      width: 93.06vw;
      height: 10.13vw;
      border-radius: 0.8vw;
      background-color: #090A1B;
      border: 1px solid rgba(135, 139, 151, 100);
      position: relative;
      top: 14.93vw;
      left: 3.46vw;
      display: flex;
      align-items: center;
      input {
        width: 85.33vw;
        color: #fff;
        font-size: 3.73vw;
        height: 6.66vw;
        position: relative;
        left: 2.4vw;
        background-color: #090A1B;
        border-width: 0;
      }
      input::-webkit-input-placeholder {
        color: rgba(79, 82, 93, 100);
      }
    }
    .p2 {
      width: 85vw;
      height: 4.53vw;
      color: rgba(255, 255, 255, 100);
      font-size: 3.2vw;
      text-align: left;
      font-family: PingFangSC-regular;
      position: relative;
      top: 19.2vw;
      left: 3.46vw;
      letter-spacing: 0.1vw;
    }
    .verify {
      width: 93.06vw;
      height: 10.13vw;
      border-radius: 0.8vw;
      background-color: #090A1B;
      color: rgba(16, 16, 16, 100);
      font-size: 3.73vw;
      text-align: center;
      //font-family: Arial;
      border: 1px solid rgba(135, 139, 151, 100);
      position: relative;
      top: 22.4vw;
      left: 3.46vw;
      display: flex;
      align-items: center;
      input {
        height: 6.93vw;
        width: 62.93vw;
        font-size: 3.73vw;
        position: relative;
        left: 3.46vw;
        background-color: #090A1B;
        border-width: 0;
        color: #fff;
        letter-spacing: 0.1vw;
      }
      input::-webkit-input-placeholder {
        color: rgba(79, 82, 93, 100);
      }
      p {
        width: 22vw;
        color: rgba(10, 122, 255, 100);
        font-size: 3.73vw;
        text-align: right;
        font-family: PingFangSC-regular;
        position: relative;
        left: 4.2vw;
        text-align: right;
      }
    }
    .identify {
      width: 93.33vw;
      height: 10.66vw;
      line-height: 5.33vw;
      border-radius: 1.33vw;
      background-color: rgba(10, 122, 255, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 3.73vw;
      text-align: center;
      //font-family: Arial;
      position: relative;
      top: 42.66vw;
    }
  }
  .share {
    .top {
      // height:192vw;
      height: calc(100vh - 22vw);
      .shareImg {
        width: 100%;
        height: 100%;
        margin-left: 0;
        // object-fit: cover;
      }
    }
    .bottom {
      height: 22vw;
      background-color: #fff;
      display: flex;
      align-items: center;
      .left {
        margin-left: 6vw;
        height: 15vw;
        width: 16vw;
        background-color: pink;
        img {
          width: 16vw;
        }
      }
      .right {
        height: 17vw;
        width: 64vw;
        margin-left: 5vw;
        text-align: left;
        .p1 {
          font-size: 3.7vw;
          display: flex;
          align-items: center;
          height: 10vw;
          line-height: 4.4vw;
          color: rgb(36, 31, 31);
          font-weight: 600;
        }
        .p2 {
          margin-top: 1.4vw;
          font-size: 3.2vw;
          color: rgb(99, 94, 94);
          display: flex;
          align-items: center;
          span {
            color: rgba(10, 122, 255, 100);
            margin-left: 0.5vw;
            font-weight: 550;
          }
          img {
            width: 12px;
            margin-left: 10px;
          }
        }
      }
    }
  }
  .duankaishow {
    width: 75.2vw;
    // height: 68.2vw;
    padding-bottom: 0;
    p {
      margin-top: 4vw;
    }
    img {
      width: 12.2vw;
      margin: 5.6vw 0 4.5vw;
    }

    .content {
      width: 64vw;
      margin: 0 auto 11.5vw;
      font-size: 3.2vw;
      line-height: 5.6vw;
      text-align: left;

      span {
        display: block;
        font-size: 14px;
      }
    }

    ::v-deep .van-dialog__footer {
      display: none;
      margin-bottom: 20px;
      .van-button--large {
        background-color: #171A2B;
        display: flex;
        justify-content: center;
        align-items: center;

        .van-button__content {
          width: 30.1vw;
          height: 9.6vw;
          background-color: #8992AE;
          color: #fff;
          border-radius: 5px;
        }
      }

      .van-dialog__confirm {
        .van-button__content {
          background-color: #0a7aff;
        }
      }

      .van-hairline--left::after {
        border-color: #171A2B;
      }
    }

    ::v-deep .van-hairline--top::after {
      border-top-width: 0;
    }
  }
}
</style>
